<template>
  <div class="common-detail">
    <div class="links">
      <div
        v-for="(item, inx) in domList"
        :key="item.target"
        :class="{ active: currentIndex === inx }"
        :title="item.label"
        @click="goToLink(inx)"
      >
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
      </div>
    </div>
    <div v-if="showClose" class="close" @click="closeDetail">
      <el-icon :size="20">
        <close />
      </el-icon>
    </div>
    <div class="btn-wrap">
      <slot name="operator"></slot>
    </div>
    <div id="detail-info-wrap" class="detail-info-wrap" @scroll="scroll">
      <div
        :style="autoHeight !== 'auto' ? { height: domState.autoHeight + 'px' } : { height: 'auto' }"
      >
        <template v-for="(item, index) in domList" :key="index">
          <component :is="item.component" :detail="detail" @toggle="toggle" @search="search" />
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineExpose, defineProps, reactive, toRefs } from 'vue'

import Assess from './assess.vue'
import Detail from './detail.vue'
import Issue from './issue.vue'
import Time from './time.vue'
import Viewer from './viewer.vue'

const domData = [
  {
    target: '#detail',
    label: '详情',
    icon: 'info-filled',
    component: Detail,
  },
  {
    target: '#time',
    label: '时间',
    icon: 'clock',
    component: Time,
  },
  {
    target: '#viewer',
    label: '影像',
    icon: 'platform',
    component: Viewer,
  },
  {
    target: '#issue',
    label: '质疑',
    icon: 'question-filled',
    component: Issue,
  },
  {
    target: '#assess',
    label: '评估',
    icon: 'eleme',
    component: Assess,
  },
]

const props = defineProps({
  domRef: {
    type: Array,
    default: () => [],
  },
  detail: {
    type: Object,
    default: () => {},
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
  showClose: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['toggle', 'search', 'update:is-open'])

const _isOpen = computed({
  get() {
    return props.isOpen
  },
  set(val) {
    emits('update:is-open', val)
  },
})

const closeDetail = () => {
  _isOpen.value = false
}

const search = () => {
  emits('search')
}

const domState: any = reactive({
  currentIndex: 0,
  domTop: [],
  autoHeight: 'auto',
})
const { currentIndex, domTop, autoHeight } = toRefs(domState)

const domList = computed(() => {
  return domData.filter((v: any) => props.domRef.some((d: any) => v.target === d))
})

const setAutoHeight = () => {
  const fatherDom: any = document.querySelector('#detail-info-wrap')
  const fatherHeight = fatherDom.offsetHeight

  let sonHeight = 0

  const sonDom: any = document.querySelector('#detail-info-wrap > div')
  sonHeight = sonDom.offsetHeight

  const lastSonDom: any = document.querySelector(domList.value[domList.value.length - 1].target)
  const lastSonHeight = lastSonDom?.offsetHeight || 0

  domState.autoHeight = sonHeight + Math.abs(fatherHeight - lastSonHeight)
}

const getDomTop = () => {
  domState.autoHeight = 'auto'
  setTimeout(() => {
    domState.domTop = []
    domList.value.forEach((v: any) => {
      const detailDom = document.querySelector(v.target)
      const domTop = detailDom?.offsetTop || 0
      domState.domTop.push(domTop)
    })
    setAutoHeight()
    ;(document.querySelector('#detail-info-wrap') as any).scrollTop =
      domTop.value[domState.currentIndex]
  }, 500)
}

const scroll = () => {
  const scrollTop = Math.ceil(document.querySelector('#detail-info-wrap')?.scrollTop || 0)
  for (let i = 1; i < domState.domTop.length; i++) {
    if (scrollTop < 0) {
      domState.currentIndex = -1
    } else if (scrollTop >= domState.domTop[domState.domTop.length - 1]) {
      domState.currentIndex = domState.domTop.length - 1
    } else if (scrollTop >= domState.domTop[i - 1] && scrollTop < domState.domTop[i]) {
      domState.currentIndex = i - 1
    }
  }
}

const toggle = () => {
  getDomTop()
}

const goToLink = (i: number) => {
  ;(document.querySelector('#detail-info-wrap') as any).scrollTop = domTop.value[i]
}

defineExpose({
  getDomTop,
})
</script>

<style lang="scss" scoped>
.common-detail {
  position: relative;
  // padding-top: 42px;

  .btn-wrap {
    left: 50px;
    position: absolute;
    // padding-left: 50px;
    margin-bottom: 10px;
  }

  .close {
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;

    &:hover {
      color: var(--color-primary);
    }
  }
  .links {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 40px;
    // background: var(--background-color-1);
    text-align: center;
    z-index: 10;

    & > div {
      display: flex;
      padding: 10px;
      color: var(--mainnav-color);
      cursor: pointer;
      align-items: center;
      justify-content: center;

      &.active {
        color: var(--color-primary);
      }

      .el-icon {
        font-size: 20px;
      }
    }
  }

  .detail-info-wrap {
    position: relative;
    height: calc(100% - 42px);
    margin-top: 42px;
    padding-left: 50px;
    padding-right: 10px;
    overflow: auto;
    @include scroll-bar;

    :deep(.info-item) {
      padding-top: 10px;

      .info-title {
        margin-top: 0;
      }
    }
  }
  :deep() {
    .detail-info {
      &-item {
        display: flex;
        margin-bottom: 18px;
        line-height: 32px;
      }

      &__label {
        width: 80px;
        padding-right: 12px;
        font-size: var(--el-form-label-font-size);
        font-weight: 700;
        color: var(--el-text-color-regular);
        text-align: right;
      }
    }
  }
}
</style>
